<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="register-form">
			<view class="title">手机验证</view>
			<u-form :model="form" ref="uForm" class="mt-30" label-width="30">
				<u-form-item prop="phone" :border-bottom="false">
					<view class="form-item-wrapper">
						<u-input v-model="form.phone" placeholder-style="font-size:28rpx;font-weight:600;color:#999"
							placeholder="请输入您的手机号码" />
					</view>
				</u-form-item>
				<u-form-item prop="account" :border-bottom="false">
					<view class="form-item-wrapper">
						<u-input v-model="form.account" placeholder-style="font-size:28rpx;font-weight:600;color:#999"
							placeholder="请输入用户名" />
					</view>
				</u-form-item>
				<u-form-item prop="password" :border-bottom="false">
					<view class="form-item-wrapper">
						<u-input type="password" v-model="form.password"
							placeholder-style="font-size:28rpx;font-weight:600;color:#999" placeholder="请输入账号密码"
							password-icon />
					</view>
				</u-form-item>
				<u-form-item prop="rPassword" :border-bottom="false">
					<view class="form-item-wrapper">
						<u-input type="password" v-model="form.rPassword"
							placeholder-style="font-size:28rpx;font-weight:600;color:#999" placeholder="请再次输入账号密码"
							password-icon />
					</view>
				</u-form-item>
				<u-form-item prop="vcode" :border-bottom="false">
					<view class="form-item-wrapper flex align-center">
						<u-input class="vcode-input" v-model="form.vcode"
							placeholder-style="font-size:28rpx;font-weight:600;color:#999" placeholder="请输入验证码" />
						<view class="vcode-btn" @tap="getVcode">{{vcodeBtnStatus}}</view>
					</view>
				</u-form-item>
				<u-form-item prop="code" :border-bottom="false">
					<view class="form-item-wrapper">
						<u-input v-model="form.code" placeholder-style="font-size:28rpx;font-weight:600;color:#999"
							placeholder="请输入邀请码" />
					</view>
				</u-form-item>
			</u-form>
			<view class="submit-btn common-btn" @tap="submit">开户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vcodeBtnStatus: "获取验证码",
				timer: null,
				form: {
					phone: "",
					account: "",
					password: "",
					rPassword: "",
					vcode: "",
					code: ""
				},
				rules: {
					// 字段名称
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					account: {
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur'],
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					},
					rPassword: [{
							required: true,
							message: '请再次确认密码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								console.log("value is", value, "password is", this.form.password)
								return value === this.form.password
							},
							message: '2次密码输入不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					vcode: {
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					},
					code: {
						required: true,
						message: '请输入邀请码',
						trigger: ['change', 'blur'],
					},
				}
			};
		},
		methods: {
			getVcode() {
				if (this.timer) {
					return false
				}
				if (!this.$u.test.mobile(this.form.phone)) {
					uni.showToast({
						icon: "error",
						title: "号码格式有误"
					})
					return false
				}
				let count = 60
				this.vcodeBtnStatus = count + "s"
				this.timer = setInterval(() => {
					if (count <= 0) {
						this.vcodeBtnStatus = "获取验证码"
						clearInterval(this.timer)
						this.timer = null
						return
					}
					count--
					this.vcodeBtnStatus = count + "s"
				}, 1000)
				this.$u.api.getVcodeApi({
					mobile: this.form.phone,
					event: "register"
				}).then((res) => {
					if (res.code == 2) {

						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
					if (res.code == 1) {

						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let form = {
							username: this.form.account,
							mobile: this.form.phone,
							password: this.form.password,
							repassword: this.form.rPassword,
							code: this.form.vcode,
							invit: this.form.code
						}
						this.$u.api.registerApi(form).then(() => {
							uni.showToast({
								icon: "success",
								title: "注册成功"
							})
							setTimeout(() => {
								this.$Router.push("/pages/login/login")
							}, 1000)
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #fff;

		.register-form {
			padding: 60rpx 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.form-item-wrapper {
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 10rpx;
				padding: 15rpx 30rpx;
				background: $color-gray;
				border-radius: 50rpx;
			}

			.vcode-input {
				flex: 1;
				margin-right: 30rpx;
			}

			.vcode-btn {
				height: 50rpx;
				width: 170rpx;
				border-radius: 25rpx;
				font-size: 24rpx;
				color: #fff;
				line-height: 50rpx;
				text-align: center;
				background: $color-blue;
			}
		}

		.submit-btn {
			margin-top: 50rpx;
		}
	}
</style>
